---
// 飞力猫联系方式组件 - 现代化简约风格设计
// 采用白、黑、蓝色调，注重留白和视觉层次
// 响应式设计，适配不同设备尺寸
// 使用真实的微信二维码图片，优化布局平衡
// 修改为直角设计，减少悬停效果
// 优化移动端排版和视觉效果
---
<section class="bg-white py-12 sm:py-16 lg:py-28 relative overflow-hidden">
  <!-- 背景装饰元素 - 更加简约，移动端优化 -->
  <div class="absolute inset-0 bg-gradient-to-br from-blue-50/20 to-transparent"></div>
  <div class="absolute top-0 right-0 w-60 h-60 sm:w-80 sm:h-80 bg-blue-600/3 -translate-y-20 sm:-translate-y-40 translate-x-20 sm:translate-x-40"></div>
  <div class="absolute bottom-0 left-0 w-40 h-40 sm:w-60 sm:h-60 bg-blue-600/2 translate-y-20 sm:translate-y-30 -translate-x-20 sm:-translate-x-30"></div>
  
  <div class="container mx-auto px-4 sm:px-6 lg:px-8 relative z-10">
    <!-- 标题区域 - 优化移动端间距和层次 -->
    <div class="text-center mb-12 sm:mb-16 lg:mb-24">
      <div class="inline-block">
        <!-- 小标签 - 改为直角，移动端优化 -->
        <div class="inline-flex items-center px-4 py-2 sm:px-5 sm:py-2.5 bg-blue-50 text-blue-600 text-sm font-medium mb-6 sm:mb-8 border border-blue-100">
          <svg class="w-4 h-4 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 8l7.89 4.26a2 2 0 002.22 0L21 8M5 19h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z"></path>
          </svg>
          联系我们
        </div>
        
        <h2 class="text-3xl sm:text-4xl md:text-5xl lg:text-6xl font-extralight text-gray-900 mb-6 sm:mb-8 tracking-tight leading-tight px-4">
          让我们<span class="text-blue-600 font-light">连接</span>
        </h2>
        
        <!-- 优化的装饰线条 - 更加精致，移动端适配 -->
        <div class="flex items-center justify-center mb-6 sm:mb-10">
          <div class="w-8 sm:w-12 h-px bg-gray-300"></div>
          <div class="w-2 h-2 sm:w-2.5 sm:h-2.5 bg-blue-600 mx-3 sm:mx-4"></div>
          <div class="w-8 sm:w-12 h-px bg-gray-300"></div>
        </div>
      </div>
      
      <p class="text-base sm:text-lg text-gray-600 max-w-2xl mx-auto font-light leading-relaxed px-4">
        飞力猫致力于为您提供最优质的服务体验<br class="hidden md:block">
        <span class="text-gray-500">欢迎随时与我们取得联系，开启合作之旅</span>
      </p>
    </div>

    <!-- 主要内容区域 - 优化移动端布局平衡 -->
    <div class="grid grid-cols-1 lg:grid-cols-5 gap-8 sm:gap-12 lg:gap-16">
      
      <!-- 左侧：二维码区域 - 移动端优化 -->
      <div class="qr-codes-section lg:col-span-2 order-2 lg:order-1">
        <div class="bg-white border border-gray-100 p-6 sm:p-8 shadow-sm hover:shadow-md transition-shadow duration-300 lg:sticky lg:top-8">
          <div class="text-center mb-6 sm:mb-8">
            <div class="inline-flex items-center justify-center w-12 h-12 sm:w-14 sm:h-14 bg-blue-50 mb-4 sm:mb-6 border border-blue-100">
              <svg class="w-6 h-6 sm:w-7 sm:h-7 text-blue-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M12 4v1m6 11h2m-6 0h-2v4m0-11v3m0 0h.01M12 12h4.01M16 20h4M4 12h4m12 0h4M4 8h4m4 0V4m0 0h4m-4 0h2m-6 4h2m0 0h4m-4 0v4m-4-4h4m-4 0V8M8 12V8"></path>
              </svg>
            </div>
            <h3 class="text-lg sm:text-xl font-light text-gray-900 mb-2 sm:mb-3">
              扫码快速访问
            </h3>
            <p class="text-gray-500 text-sm">
              多种方式，便捷体验
            </p>
          </div>
          
          <!-- 二维码区域 - 移动端优化布局 -->
          <div class="space-y-4 sm:space-y-6">
            
            <!-- 微信小程序二维码 - 移动端优化 -->
            <div class="qr-code-item group text-center">
              <div class="bg-gradient-to-br from-blue-50 to-blue-100/30 border border-blue-100 p-4 sm:p-6 hover:from-blue-100 hover:to-blue-200/40 transition-colors duration-300">
                <!-- 真实的微信二维码图片 - 移动端尺寸优化 -->
                <div class="w-24 h-24 sm:w-32 sm:h-32 mx-auto mb-3 sm:mb-5 overflow-hidden shadow-sm border-2 border-white">
                  <img 
                    src="/assets/team/flmxcx.png"
                    alt="微信小程序二维码" 
                    class="w-full h-full object-cover"
                    loading="lazy"
                  />
                </div>
                <h5 class="text-base sm:text-lg font-medium text-gray-900 mb-1 sm:mb-2">
                  微信小程序
                </h5>
                <p class="text-xs sm:text-sm text-gray-500 font-light">
                  扫码体验小程序
                </p>
              </div>
            </div>

            <!-- APP下载二维码 - 移动端优化 -->
            <div class="qr-code-item group text-center">
              <div class="bg-gray-50 border border-gray-100 p-4 sm:p-6 hover:bg-white transition-colors duration-300">
                <!-- 二维码占位符 - 移动端尺寸优化 -->
                <div class="w-24 h-24 sm:w-32 sm:h-32 mx-auto mb-3 sm:mb-5 overflow-hidden shadow-sm border-2 border-white">
                  <img 
                    src="/assets/team/flmAndroid.png" 
                    alt="飞利猫Android APP下载二维码" 
                    class="w-full h-full object-cover"
                    loading="lazy"
                  />
                </div>
                <h5 class="text-base sm:text-lg font-medium text-gray-900 mb-1 sm:mb-2">
                  APP下载
                </h5>
                <p class="text-xs sm:text-sm text-gray-500 font-light">
                  扫码下载应用
                </p>
              </div>
            </div>
          </div>

          <!-- 设备支持提示 - 移动端优化 -->
          <div class="support-info mt-6 sm:mt-8">
            <div class="text-center py-4 sm:py-6 border-t border-gray-100">
              <p class="text-sm text-gray-600 mb-3 sm:mb-4 font-medium">
                多平台支持
              </p>
              <div class="flex items-center justify-center flex-wrap gap-2 sm:gap-4 text-xs text-gray-500">
                <div class="flex items-center space-x-2 bg-blue-50 px-2 py-1 sm:px-3 sm:py-2 border border-blue-100">
                  <div class="w-2 h-2 bg-blue-600"></div>
                  <span>iOS</span>
                </div>
                <div class="flex items-center space-x-2 bg-blue-50 px-2 py-1 sm:px-3 sm:py-2 border border-blue-100">
                  <div class="w-2 h-2 bg-blue-600"></div>
                  <span>Android</span>
                </div>
                <div class="flex items-center space-x-2 bg-blue-50 px-2 py-1 sm:px-3 sm:py-2 border border-blue-100">
                  <div class="w-2 h-2 bg-blue-600"></div>
                  <span>微信</span>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>

      <!-- 右侧：联系信息和下载区域 - 移动端优化 -->
      <div class="contact-content lg:col-span-3 order-1 lg:order-2">
        
        <!-- 联系信息卡片 - 移动端优化设计 -->
        <div class="contact-card mb-8 sm:mb-12 lg:mb-16">
          <div class="bg-white border border-gray-100 p-6 sm:p-8 lg:p-10 shadow-sm hover:shadow-md transition-shadow duration-300">
            <div class="mb-6 sm:mb-8 lg:mb-10">
              <div class="flex items-center mb-3 sm:mb-4">
                <svg class="w-5 h-5 text-blue-600 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M3 8l7.89 4.26a2 2 0 002.22 0L21 8M5 19h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z"></path>
                </svg>
                <h3 class="text-xl sm:text-2xl font-light text-gray-900">
                  联系信息
                </h3>
              </div>
              <p class="text-gray-500 text-sm">
                多种方式，随时沟通
              </p>
            </div>
            
            <!-- 联系方式列表 - 移动端优化布局 -->
            <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4 sm:gap-6">
              
              <!-- 地址信息 - 移动端优化 -->
              <div class="contact-item group sm:col-span-2 lg:col-span-1">
                <div class="bg-gray-50 border border-gray-100 p-4 sm:p-6 hover:bg-white transition-colors duration-300 h-full">
                  <div class="flex flex-col items-center text-center">
                    <h4 class="text-base sm:text-lg font-medium text-gray-900 mb-2 sm:mb-3">公司地址</h4>
                    <p class="text-gray-600 font-light leading-relaxed text-sm">
                      山东省潍坊市青州市云门山街道
                    </p>
                  </div>
                </div>
              </div>

              <!-- 电话信息 - 移动端优化 -->
              <div class="contact-item group">
                <div class="bg-gray-50 border border-gray-100 p-4 sm:p-6 hover:bg-white transition-colors duration-300 h-full">
                  <div class="flex flex-col items-center text-center">
                    <h4 class="text-base sm:text-lg font-medium text-gray-900 mb-2 sm:mb-3">联系电话</h4>
                    <a href="tel:400-000-9978" class="text-lg sm:text-xl font-light text-blue-600 hover:text-blue-700 transition-colors duration-300">
                      400-000-9978
                    </a>
                  </div>
                </div>
              </div>

              <!-- 邮箱信息 - 移动端优化 -->
              <div class="contact-item group">
                <div class="bg-gray-50 border border-gray-100 p-4 sm:p-6 hover:bg-white transition-colors duration-300 h-full">
                  <div class="flex flex-col items-center text-center">
                    <h4 class="text-base sm:text-lg font-medium text-gray-900 mb-2 sm:mb-3">邮箱地址</h4>
                    <a href="mailto:huzhongwei@feilimao.cn" class="text-blue-600 hover:text-blue-700 font-light transition-colors duration-300 break-all text-xs sm:text-sm">
                      huzhongwei@feilimao.cn
                    </a>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
        <!-- APP下载区域 - 移动端优化设计 -->
        <div class="download-section">
          <div class="bg-white p-4 sm:p-6 border border-gray-100">
            <div class="mb-4 sm:mb-6">
              <div class="flex items-center justify-between">
                <div class="flex items-center">
                  <h3 class="text-lg sm:text-xl text-gray-900 flex items-center">
                    <svg class="w-5 h-5 text-blue-600 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                      <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-4l-4 4m0 0l-4-4m4 4V4"/>
                    </svg>
                    APP下载
                  </h3>
                </div>
                <button class="px-4 py-2 bg-blue-600 text-white text-sm rounded-sm hover:bg-blue-700 transition-colors duration-300 flex items-center">
                  <svg class="w-4 h-4 mr-1" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-4l-4 4m0 0l-4-4m4 4V4"/>
                  </svg>
                  立即下载
                </button>
              </div>
              <p class="text-gray-500 text-sm mt-2">
                扫码下载，随时使用
              </p>
            </div>
            <div class="h-px bg-gray-100"></div>
          
          <!-- 页脚联系信息 -->
          <div class="mt-8 sm:mt-12 pt-6 sm:pt-8 border-t border-gray-100">
            <div class="text-center">
              <h3 class="text-base sm:text-lg font-medium text-gray-900 mb-3 sm:mb-4">联系我们</h3>
              <div class="grid grid-cols-1 sm:grid-cols-3 gap-4 sm:gap-6 max-w-2xl mx-auto">
                <div class="text-center">
                  <div class="text-gray-600 text-sm">
                    <div class="font-medium mb-1">客服电话</div>
                    <div class="text-xs sm:text-sm">400-123-4567</div>
                  </div>
                </div>
                <div class="text-center">
                  <div class="text-gray-600 text-sm">
                    <div class="font-medium mb-1">工作时间</div>
                    <div class="text-xs sm:text-sm">周一至周日 9:00-18:00</div>
                  </div>
                </div>
                <div class="text-center">
                  <div class="text-gray-600 text-sm">
                    <div class="font-medium mb-1">邮箱地址</div>
                    <div class="text-xs sm:text-sm">service@feilimao.com</div>
                  </div>
                </div>
              </div>
            </div>
          </div>
          </div>
            
            <!-- 下载方式 - 移动端响应式布局 -->
            <div class="grid grid-cols-2 sm:grid-cols-3 lg:grid-cols-5 gap-3 sm:gap-4">
              
              <!-- 微信小程序 -->
              <div class="download-item group">
                <div class="bg-gray-50 border border-gray-100 p-3 sm:p-4 hover:bg-white transition-colors duration-300 text-center">
                  <div class="flex flex-col items-center space-y-2 sm:space-y-3">
                    <div class="flex-shrink-0">
                      <img src="/assets/team/flmxcx.png" alt="微信小程序二维码" class="w-16 h-16 sm:w-20 sm:h-20 lg:w-24 lg:h-24 border border-gray-200 shadow-sm mx-auto">
                    </div>
                    <div>
                      <h4 class="text-xs sm:text-sm font-medium text-gray-900 mb-1">微信小程序</h4>
                      <p class="text-gray-600 font-light text-xs hidden sm:block">扫码体验</p>
                    </div>
                  </div>
                </div>
              </div>

              <!-- Android APP -->
              <div class="download-item group">
                <div class="bg-gray-50 border border-gray-100 p-3 sm:p-4 hover:bg-white transition-colors duration-300 text-center">
                  <div class="flex flex-col items-center space-y-2 sm:space-y-3">
                    <div class="flex-shrink-0">
                      <div class="w-16 h-16 sm:w-20 sm:h-20 lg:w-24 lg:h-24 bg-gradient-to-br from-blue-50 to-blue-100 border border-blue-200 flex items-center justify-center overflow-hidden mx-auto">
                        <img 
                          src="/assets/team/flmAndroid.png" 
                          alt="Android APP下载二维码" 
                          class="w-full h-full object-cover"
                          loading="lazy"
                        />
                      </div>
                    </div>
                    <div>
                      <h4 class="text-xs sm:text-sm font-medium text-gray-900 mb-1">Android APP</h4>
                      <p class="text-gray-600 font-light text-xs hidden sm:block">安卓下载</p>
                    </div>
                  </div>
                </div>
              </div>

              <!-- iOS APP -->
              <div class="download-item group lg:block hidden">
                <div class="bg-gray-50 border border-gray-100 p-3 sm:p-4 hover:bg-white transition-colors duration-300 text-center">
                  <div class="flex flex-col items-center space-y-2 sm:space-y-3">
                    <div class="flex-shrink-0">
                      <div class="w-16 h-16 sm:w-20 sm:h-20 lg:w-24 lg:h-24 bg-gradient-to-br from-gray-50 to-gray-100 border border-gray-200 flex items-center justify-center overflow-hidden mx-auto">
                        <!-- iOS二维码占位符 -->
                        <svg class="w-8 h-8 sm:w-10 sm:h-10 lg:w-12 lg:h-12 text-gray-400" fill="currentColor" viewBox="0 0 24 24">
                          <path d="M18.71 19.5c-.83 1.24-1.71 2.45-3.05 2.47-1.34.03-1.77-.79-3.29-.79-1.53 0-2 .77-3.27.82-1.31.05-2.3-1.32-3.14-2.53C4.25 17 2.94 12.45 4.7 9.39c.87-1.52 2.43-2.48 4.12-2.51 1.28-.02 2.5.87 3.29.87.78 0 2.26-1.07 3.81-.91.65.03 2.47.26 3.64 1.98-.09.06-2.17 1.28-2.15 3.81.03 3.02 2.65 4.03 2.68 4.04-.03.07-.42 1.44-1.38 2.83M13 3.5c.73-.83 1.94-1.46 2.94-1.5.13 1.17-.34 2.35-1.04 3.19-.69.85-1.83 1.51-2.95 1.42-.15-1.15.41-2.35 1.05-3.11z"/>
                        </svg>
                      </div>
                    </div>
                    <div>
                      <h4 class="text-xs sm:text-sm font-medium text-gray-900 mb-1">iOS APP</h4>
                      <p class="text-gray-600 font-light text-xs hidden sm:block">苹果下载</p>
                    </div>
                  </div>
                </div>
              </div>

              <!-- 官方网站 -->
              <div class="download-item group">
                <div class="bg-gray-50 border border-gray-100 p-3 sm:p-4 hover:bg-white transition-colors duration-300 text-center">
                  <div class="flex flex-col items-center space-y-2 sm:space-y-3">
                    <div class="flex-shrink-0">
                      <div class="w-16 h-16 sm:w-20 sm:h-20 lg:w-24 lg:h-24 bg-gradient-to-br from-green-50 to-green-100 border border-green-200 flex items-center justify-center overflow-hidden mx-auto">
                        <!-- 官网二维码图片 -->
                        <img 
                          src="/assets/team/flmdp.png" 
                          alt="官方网站二维码" 
                          class="w-full h-full object-cover"
                          loading="lazy"
                        />
                      </div>
                    </div>
                    <div>
                      <h4 class="text-xs sm:text-sm font-medium text-gray-900 mb-1">官方店铺</h4>
                      <p class="text-gray-600 font-light text-xs hidden sm:block">访问官网</p>
                    </div>
                  </div>
                </div>
              </div>

              <!-- 代理申请 -->
              <div class="download-item group">
                <div class="bg-gray-50 border border-gray-100 p-3 sm:p-4 hover:bg-white transition-colors duration-300 text-center">
                  <div class="flex flex-col items-center space-y-2 sm:space-y-3">
                    <div class="flex-shrink-0">
                      <div class="w-16 h-16 sm:w-20 sm:h-20 lg:w-24 lg:h-24 bg-gradient-to-br from-purple-50 to-purple-100 border border-purple-200 flex items-center justify-center overflow-hidden mx-auto">
                        <!-- 代理申请二维码 -->
                        <img 
                          src="/assets/team/flmdl.png"
                          alt="代理申请二维码"
                          class="w-full h-full object-cover"
                          loading="lazy"
                        />
                      </div>
                    </div>
                    <div>
                      <h4 class="text-xs sm:text-sm font-medium text-gray-900 mb-1">代理申请</h4>
                      <p class="text-gray-600 font-light text-xs hidden sm:block">在线申请</p>
                    </div>
                  </div>
                </div>
              </div>
            </div>

            <!-- 下载提示 - 改为直角 -->
            <div class="mt-6 sm:mt-8 pt-4 sm:pt-6 border-t border-gray-100">
              <div class="text-center">
                <p class="text-sm text-gray-500 mb-3">
                  支持多种下载方式
                </p>
                <div class="flex items-center justify-center space-x-4 sm:space-x-6 text-xs text-gray-400">
                  <span class="flex items-center">
                    <div class="w-1.5 h-1.5 bg-blue-600 mr-2"></div>
                    应用商店
                  </span>
                  <span class="flex items-center">
                    <div class="w-1.5 h-1.5 bg-blue-600 mr-2"></div>
                    官网下载
                  </span>
                  <span class="flex items-center">
                    <div class="w-1.5 h-1.5 bg-blue-600 mr-2"></div>
                    扫码安装
                  </span>
                </div>
              </div>
            </div>
          </div>
        </div>
        </div>
      </div>
    </div>
    <!-- 底部联系提示 - 改为直角 -->
    <div class="flex flex-wrap w-full">
      <div class="w-full">
        <div class="text-center mt-12">
      <div class="bg-gray-50 border border-gray-100 p-8 hover:bg-white transition-colors duration-300">
        <div class="max-w-6xl mx-auto">
          <h3 class="text-xl font-light text-gray-900 mb-4">
            还有疑问？
          </h3>
          <p class="text-gray-600 mb-6 font-light">
            我们的客服团队随时为您提供帮助，欢迎通过以上任意方式联系我们
          </p>
          <div class="flex items-center justify-center space-x-8 text-sm text-gray-500">
            <div class="flex items-center">
              <svg class="w-4 h-4 mr-2 text-blue-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"></path>
              </svg>
              工作时间：9:00-18:00
            </div>
            <div class="flex items-center">
              <svg class="w-4 h-4 mr-2 text-blue-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17.657 16.657L13.414 20.9a1.998 1.998 0 01-2.827 0l-4.244-4.243a8 8 0 1111.314 0z"></path>
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 11a3 3 0 11-6 0 3 3 0 016 0z"></path>
              </svg>
              全国服务
            </div>
          </div>
        </div>
        </div>
      </div>
    </div>
  </div>
</section>

<style>
  /* 联系我们组件样式 */
  .contact-section {
    /* 基础样式已通过 Tailwind 类实现 */
  }

  /* 标题区域样式 */
  .title-area {
    /* 基础样式已通过 Tailwind 类实现 */
  }

  /* 主要内容区域样式 */
  .main-content {
    /* 基础样式已通过 Tailwind 类实现 */
  }

  /* 二维码区域样式 */
  .qr-section {
    /* 基础样式已通过 Tailwind 类实现 */
  }

  /* 联系信息区域样式 */
  .contact-info {
    /* 基础样式已通过 Tailwind 类实现 */
  }

  /* APP下载区域样式 */
  .app-download {
    /* 基础样式已通过 Tailwind 类实现 */
  }

  /* 下载项目悬停效果 */
  .download-item:hover .bg-gray-50 {
    background-color: white;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
  }

  /* 响应式设计 */
  @media (max-width: 640px) {
    /* 移动端样式调整 */
    .download-grid {
      grid-template-columns: repeat(2, 1fr);
      gap: 0.75rem;
    }
    
    /* 隐藏iOS项目在小屏幕上 */
    .download-item.lg\:block.hidden {
      display: none;
    }
    
    /* 优化二维码图片在小屏幕上的显示 */
    .download-item img {
      border-radius: 2px;
    }
  }

  @media (min-width: 641px) and (max-width: 1023px) {
    /* 平板端样式调整 */
    .download-grid {
      grid-template-columns: repeat(3, 1fr);
    }
  }

  @media (min-width: 1024px) {
    /* 桌面端样式调整 */
    .download-grid {
      grid-template-columns: repeat(5, 1fr);
    }
  }

  /* 打印样式 */
  @media print {
    /* 打印时的样式调整 */
    .contact-section {
      background: white !important;
      color: black !important;
    }
    
    .download-item {
      break-inside: avoid;
    }
  }
</style>